
header {
    .ding {
        background-color: #5485A2;
        width: 10rem;
        height: 1.29rem;
        line-height: 1.29rem;
        position: fixed;
        top: 0;
        z-index: 2;
        .name {
            margin: 0 auto;
            width: 1.5rem;
            font-size: 0.49rem;
            font-family: PingFang;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
}

nav {
    background-color: #fff;
    .serch {
        height: 1.17rem;
        line-height: 1.17rem;
        display: flex;
        justify-content: space-between;
        .left {
            display: flex;
            align-items: center;

            .tubiao {
                img {
                    width: 0.4rem;
                    margin: 0.4rem 0.16rem 0.4rem 0.4rem;
                }
            }

            .serch1 {
                width: 6.5rem;
                font-size: 0.4rem;
            }
        }

        .right {
            display: flex;
            align-items: center;

            .kuang {
                width: 0.01rem;
                height: 1.17rem;
                background: #E5E5E5;
            }

            img {
                width: 0.63rem;
                height: 0.63rem;
                margin: 0.27rem 0.45rem;
            }
        }
    }
}

section {
background-color: #fff;
    .banner {
        position: relative;
        width: 10rem;
        height: 5.33rem;
        .tupian {
            img {
                width: 10rem;
                display: block;
            }
        }
    }

    ul {
        position: absolute;
        top: 4.92rem;
        left: 4.39rem;
        display: flex;

        .toumingdu {
            margin-right: 0.12rem;
            width: 0.21rem;
            height: 0.21rem;
            background: #FFFFFF;
            opacity: 0.8;
            border-radius: 50%;
        }

        li {
            margin-right: 0.12rem;
            width: 0.21rem;
            height: 0.21rem;
            background: #FFFFFF;
            opacity: 0.3;
            border-radius: 50%;
        }
    }
}

nav {
    background-color: #fff;
    .zhanwei{
        height: 0.27rem;
        width: 10rem;
        background-color: #efeff4;
    }
    .daohang {
        width: 10rem;
        height: 1.81rem+0.27rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .one {
            font-size: 0.32rem;
            font-family: PingFang;
            font-weight: 500;
            color: #444444;
            text-align: center;

            span {
                display: block;
                margin-top: 0.04rem;
            }

            img {

                height: 0.71rem;
            }
        }
    }
}

section {
    background-color: #fff;
    // .tuijian {
    //     height: 1.07rem;
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;

    //     .hufa {
    //         width: 1.33rem;
    //         height: 0.07rem;
    //         background: #E5E5E5;
    //         border-radius: 50%;
    //     }

    //     .jingxuan {
    //         font-size: 0.4rem;
    //         font-family: PingFang;
    //         font-weight: 500;
    //         color: #444444;
    //         margin: 0 0.32rem;
    //     }
    // }
    .recommend {
         height: 1.06666667rem;
         background-color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
        }
        .recommend .lt {
         height: 0.01333333rem;
         width: 1.26666667rem;
         background-color: #e5e5e5;
         position: relative;
        }
        .recommend .lt .round {
         width: 0.06666667rem;
         height: 0.06666667rem;
         border-radius: 50%;
         background-color: #e5e5e5;
         position: absolute;
         right: 0;
         top: 50%;
         transform: translateY(-50%);
        }
        .recommend .mid {
         margin: 0px 0.33333333rem;
        }
        .recommend .mid p {
         font-size: 0.37333333rem;
        }
        .recommend .rt {
         height: 0.01333333rem;
         width: 1.26666667rem;
         background-color: #e5e5e5;
         position: relative;
        }
        .recommend .rt .round {
         width: 0.06666667rem;
         height: 0.06666667rem;
         border-radius: 50%;
         background-color: #e5e5e5;
         position: absolute;
         left: 0;
         top: 50%;
         transform: translateY(-50%);
        }

    .neirong {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 1.31rem;
        .youkuang{
            border-right: 0.01rem solid #eeeeee;
        }
        .shangpin {
            width: 5rem;
            display: flex;
            flex-direction: column;
            position: relative;
            .cuxiao{
                position: absolute;
                top: 0;
                left: 4.1333rem;
                img{
                    width: 0.8533rem;
                }
            }
            .top {
                img {
                    width: 5rem;
                }
            }

            .center {
                font-size: 0.32rem;
                font-family: PingFang;
                font-weight: 500;
                color: #444444;
                margin: 0.3rem 0.27rem;
            }

            .bottom {
                display: flex;
                height: 0.31rem;
                align-items: flex-end;
                margin-left: 0.25rem;
                margin-bottom: 0.25rem;

                .left {
                    font-size: 0.4rem;
                    font-family: PingFang;
                    font-weight: bold;
                    color: #000000;
                }

                .right {
                    font-size: 0.24rem;
                    font-family: PingFang;
                    font-weight: 500;
                    text-decoration: line-through;
                    color: #AAAAAA;
                    margin-left: 0.2rem;
                }
            }
        }
    }
}

footer {
    .di {
        width: 10rem;
        height: 1.31rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;
        position: fixed;
        bottom: 0;
        border-top: 0.01rem solid #dddddd;
        text-align: center;
        .one {
            .xuanzhong {
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #45B5ED;
                line-height: 0.37rem;
            }
            span {
                display: block;
                font-size: 0.27rem;
                font-family: PingFang;
                font-weight: 500;
                color: #5D616A;
                line-height: 0.37rem;
                text-align: center;
                margin-top: 0.09rem;
            }

            img {
                width: 0.61rem;
            }
        }
    }
}